import React from "react";
import { Button, Col } from "antd";

export const isImg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/;
export const getChildrenToRender = (item, i) => {
  let tag = item.name.indexOf("title") === 0 ? "h2" : "div";
  tag = item.href ? "a" : tag;
  let children =
    typeof item.children === "string" && item.children.match(isImg)
      ? React.createElement("img", { src: item.children, alt: "img" })
      : item.children;
  if (item.name.indexOf("button") === 0 && typeof item.children === "object") {
    children = React.createElement(Button, {
      ...item.children,
    });
  }
  return React.createElement(tag, { key: i.toString(), ...item }, children);
};
export const getChildrenRender = (item, i) => {
  let tag = item.name.indexOf("title") === 0 ? "h2" : "div";
  tag = item.href ? "a" : tag;
  let children =
    item.name === "image"
      ? React.createElement("img", { src: item.children, alt: "img" })
      : item.children;

  return React.createElement(tag, { key: i.toString(), ...item }, children);
};
export const childrenSideRender = (nodeMap) => {
  return nodeMap.map((item, i) => {
    if (item.name === "image") {
      return (
        <Col key={i.toString()} md={12}>
          <div>
            <h2 className="content-block-title">{item.title}</h2>
            <img className="content-img" src={item.children} alt={"img"}></img>
          </div>
        </Col>
      );
    } else {
      return (
        <Col key={i.toString()} className={"content-center-block-item"} md={12}>
          <div className="content-block-text">{item.children}</div>
        </Col>
      );
    }
  });
};
export const childrenCloRender = (nodeMap: any) => {
  const nodeSort: any = [];
  nodeMap.map((item, i, arr) => {
    if (item.name === "content" && i === 0) {
      nodeSort.push(arr[1]);
    } else if (item.name === "image" && i === 1) {
      nodeSort.push(arr[0]);
    } else {
      nodeSort.push(item);
    }
  });
  console.log(nodeSort);
  return nodeSort.map((item, i) => {
    if (item.name === "image") {
      return (
        <Col key={i.toString()}>
          <div>
            <h2 className="content-block-title">{item.title}</h2>
            <img className="content-img" src={item.children} alt={"img"}></img>
          </div>
        </Col>
      );
    } else {
      return (
        <Col key={i.toString()} className={"content-center-block-item"}>
          <div className="content-block-text">{item.children}</div>
        </Col>
      );
    }
  });
};
